<template>
	<input id="localFile" name="localFile" type="file" accept="image/*" multiple>
</template>

<script>
	import 'sortablejs'
	import 'piexifjs'
	import 'bootstrap-fileinput'
	import '@/assets/js/fileinput.zh.js'
	// import 'bootstrap-fileinput/js/locales/zh.js'

	export default {
		name: 'file-upload',
		props: {
			fileCode: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				initFilesSrc: [],
				initFilesInfo: []
			}
		},
		mounted() {
			// 			this.initFilesSrc = ["<img class='kv-preview-data file-preview-image' src='https://placekitten.com/800/460'>"];
			// 			this.initFilesInfo = [{
			// 				caption: "transport-1.jpg",
			// 				size: 329892,
			// 				width: "120px",
			// 				// url: deleteUrl + '/1',
			// 				key: 2,
			// 				extra: {
			// 					code: 1
			// 				}
			// 			}];

			this.initFileInput();
		},
		methods: {
			destroyFileInput() {
				$("#localFile").fileinput('destroy');
			},
			initFileInput() {
				//初始化file input控件
				$("#localFile").fileinput({
					language: 'zh',
					uploadUrl: this.$api.file.url.upload,
					deleteUrl: this.$api.file.url.delete,
					allowedFileExtensions: ["jpg", "png", "gif", "webp"],
					maxFileSize: 1024 * 10, //单位KB
					maxFileCount: 1,
					// resizeImage: false,
					// 				maxImageWidth: 300,
					// 				maxImageHeight: 450,
					// 				minImageWidth: 300,
					// 				minImageHeight: 450,
					// resizePreference: 'height', //Image Resize (Auto) 
					showRemove: false,
					showUpload: false,
					// showDrag: false,
					// showCaption: false,
					overwriteInitial: false,
					initialPreviewAsData: true,
					initialPreview: this.initFilesSrc,
					initialPreviewConfig: this.initFilesInfo,
					layoutTemplates: {
						// actionDelete: '',
						// actionUpload: '',
						actionDrag: ''
					}
				}).on('fileuploaded', (event, data, previewId, index) => {
					console.debug("previewId", previewId);
					console.debug("index", index);
					const code = data.response.data.code;
					this.$emit('getPoster', code);
					$("#localFile").fileinput("refresh", {
						layoutTemplates: {
							actionDelete: '',
							actionUpload: '',
							actionDrag: ''
						}
					});
				}).on('filebeforedelete', function() {
					return !window.confirm('Are you sure you want to delete this file?');
					// 					return new Promise(function(resolve, reject) {
					// 						$.confirm({
					// 							title: false,
					// 							content: '您确定要执行删除操作吗？',
					// 							buttons: {
					// 								'确认': function() {
					// 									resolve();
					// 								},
					// 								'取消': function() {
					// 									$.alert('Canceled!');
					// 								}
					// 							}
					// 						});
					// 					});
				}).on('filedeleted', (event, key, jqXHR, data) => {
					console.debug("filedeleted key=", key);
					// 					this.initFilesSrc = this.initFilesSrc.filter(item => item == (viewUrl + key));
					// 					this.initFilesInfo = this.initFilesInfo.filter(item => item.key == key);
				});
			}
		},
		watch: {
			fileCode: function(val) {
				console.debug("fileCode=", val);
				if (val != "") {
					this.$api.file.list({
						code: this.fileCode
					}).then(data => {
						const file = data[0];
						this.initFilesSrc = [];
						this.initFilesInfo = [];
						this.initFilesSrc.push(this.$api.file.url.view + file.code);
						this.initFilesInfo.push({
							caption: file.fileName,
							size: file.fileSize,
							width: "120px",
							// url: deleteUrl + '/1',
							key: file.code,
							extra: {
								code: file.code
							}
						});

						this.destroyFileInput();
						this.initFileInput();
					});
				}
			}
		},
	}
</script>

<style scoped>
	@import url("~bootstrap-fileinput/css/fileinput.min.css");
</style>
